<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    [v-cloak] {
        display: none;
    }
</style>
<body>
<div id="app" v-clock>
    <h1>Name: {{ name }} (绑定v-once不会改变name)</h1>
    {{ message }}
    <template v-if="type === 'name'">
        <label>用户名：</label><input placeholder="输入用户名" key="name-input">
    </template>
    <template v-else>
        <label>邮箱：</label><input placeholder="输入邮箱" key="mail-input">
    </template>
    <button @click="handleToggleClick">切换输入类型</button>
    <ul>
        <!--<li v-for="(book, index) in books">{{index}} - {{book.name}}</li>-->
        <template v-for="book in filterBooks">
            <li>书名：{{ book.name }}</li>
            <li>作者：{{ book.author }}</li>
        </template>
    </ul>
    <span v-for="value in user">{{value}} </span>
    <a href="http://www.apple.com" @click="handleClick('禁止打开', $event)">打开链接</a>
    <div id="obj1" @click="doc">
        obj1
        <div id="obj2" @click.self="doc">
            obj2
            <div id="obj3" @click="doc">
                obj3
            </div>
        </div>
    </div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: 'alin',
            message: '这是一段文本',
            type: 'name',
            books: [
                {
                    name: '《Vue.js》实战',
                    author: '梁灏'
                },
                {
                    name: '《JavaScript 语言精髓》',
                    author: 'Crockford'
                },
                {
                    name: '《JavaScript 高级程序设计》',
                    author: 'C.Zakas'
                }
            ],
            user: {
                name: 'Aresn',
                gender: '男',
                age: 26
            },
            id: '',
            schools: [
                {
                    "deptId": null,
                    "name": "直属小学",
                    "deptName": null,
                    "directSchool": null,
                    "featuredSchool": null,
                    "pilotSchool": null,
                    "modelSchool": null,
                    "gradeType": null,
                    "unitType": "1",
                    "children": [
                        {
                            "deptId": 370066,
                            "name": "0517建校02",
                            "deptName": "0517建校02",
                            "directSchool": "1",
                            "featuredSchool": null,
                            "pilotSchool": null,
                            "modelSchool": null,
                            "gradeType": "0",
                            "unitType": null,
                            "children": [],
                            "isChoice": null
                        }
                    ],
                    "isChoice": null
                },
                {
                    "deptId": null,
                    "name": "直属初中",
                    "deptName": null,
                    "directSchool": null,
                    "featuredSchool": null,
                    "pilotSchool": null,
                    "modelSchool": null,
                    "gradeType": null,
                    "unitType": "1",
                    "children": [
                        {
                            "deptId": 370057,
                            "name": "山东高达学校",
                            "deptName": "山东高达学校",
                            "directSchool": "1",
                            "featuredSchool": "1",
                            "pilotSchool": "2",
                            "modelSchool": "1",
                            "gradeType": "1",
                            "unitType": null,
                            "children": [],
                            "isChoice": null
                        },
                        {
                            "deptId": 370067,
                            "name": "rfgfdgsfd",
                            "deptName": "rfgfdgsfd",
                            "directSchool": "1",
                            "featuredSchool": "1",
                            "pilotSchool": "4",
                            "modelSchool": "3",
                            "gradeType": "1",
                            "unitType": null,
                            "children": [],
                            "isChoice": null
                        }
                    ],
                    "isChoice": null
                },
                {
                    "deptId": null,
                    "name": "直属九年一贯制学校",
                    "deptName": null,
                    "directSchool": null,
                    "featuredSchool": null,
                    "pilotSchool": null,
                    "modelSchool": null,
                    "gradeType": null,
                    "unitType": "1",
                    "children": [
                        {
                            "deptId": 370063,
                            "name": "济南学校",
                            "deptName": "济南学校",
                            "directSchool": "1",
                            "featuredSchool": "1",
                            "pilotSchool": "1",
                            "modelSchool": "3",
                            "gradeType": "4",
                            "unitType": null,
                            "children": [],
                            "isChoice": null
                        }
                    ],
                    "isChoice": null
                },
                {
                    "deptId": null,
                    "name": "特色一批学校",
                    "deptName": null,
                    "directSchool": null,
                    "featuredSchool": null,
                    "pilotSchool": null,
                    "modelSchool": null,
                    "gradeType": null,
                    "unitType": "2",
                    "children": [
                        {
                            "deptId": 370057,
                            "name": "山东高达学校",
                            "deptName": "山东高达学校",
                            "directSchool": "1",
                            "featuredSchool": "1",
                            "pilotSchool": "2",
                            "modelSchool": "1",
                            "gradeType": "1",
                            "unitType": null,
                            "children": [],
                            "isChoice": null
                        },
                        {
                            "deptId": 370063,
                            "name": "济南学校",
                            "deptName": "济南学校",
                            "directSchool": "1",
                            "featuredSchool": "1",
                            "pilotSchool": "1",
                            "modelSchool": "3",
                            "gradeType": "4",
                            "unitType": null,
                            "children": [],
                            "isChoice": null
                        },
                        {
                            "deptId": 370067,
                            "name": "rfgfdgsfd",
                            "deptName": "rfgfdgsfd",
                            "directSchool": "1",
                            "featuredSchool": "1",
                            "pilotSchool": "4",
                            "modelSchool": "3",
                            "gradeType": "1",
                            "unitType": null,
                            "children": [],
                            "isChoice": null
                        }
                    ],
                    "isChoice": null
                },
                {
                    "deptId": null,
                    "name": "试点一批学校",
                    "deptName": null,
                    "directSchool": null,
                    "featuredSchool": null,
                    "pilotSchool": null,
                    "modelSchool": null,
                    "gradeType": null,
                    "unitType": "3",
                    "children": [
                        {
                            "deptId": 370063,
                            "name": "济南学校",
                            "deptName": "济南学校",
                            "directSchool": "1",
                            "featuredSchool": "1",
                            "pilotSchool": "1",
                            "modelSchool": "3",
                            "gradeType": "4",
                            "unitType": null,
                            "children": [],
                            "isChoice": null
                        }
                    ],
                    "isChoice": null
                }
            ]
        },
        mounted() {
            let that = this
            that.es6Rest()
            that.objArrGroup()
            // that.es6StringTemplate()
            // that.es6ArrayFrom()
        },
        computed: {
            filterBooks: function () {
                return this.books.filter(function (book) {
                    return book.name.match(/JavaScript/)
                })
            }
        },
        methods: {
            objArrGroup() {
                let arr = this.schools

                let array = [{category: "teacher", name: "Mr.Li", age: 40}, {
                    category: "teacher",
                    name: "Mr.Wang",
                    age: 20
                }, {category: "student", name: "Xiao Ming", age: 12}, {category: "student", name: "Xiao Hua", age: 20}]
                let viewGroup = this.classifiedAccordingToKey(arr, 'unitType')
                // console.log(viewGroup)
                for (let key in viewGroup) {
                    console.log(viewGroup[key])
                }
            },
            classifiedAccordingToKey(objectArray, key) {
                var newObj = {};
                objectArray.forEach(function (obj) {
                    var array = newObj[obj[key]] || [];
                    // array.push(...obj.children);
                    obj.children.forEach(o => {
                        array.push(o);
                    })
                    // ES6 对象赋值方式
                    newObj[obj[key]] = array;
                });
                return newObj;
            },

            doc() {
                this.id = event.currentTarget.id
                alert(this.id)
            },
            handleClick(message, event) {
                // event.preventDefault()
                window.alert(message)
            },
            /**
             * rest参数扩展（...args参数要放到最后）
             */
            es6Rest() {
                // 数组组合
                /*let arr = [1,2,3], arr0 = [6,7,8]
                arr.push(...arr0)
                console.log(arr)
                let str = 'prototype'*/
                // 也可以数组拷贝
                /*let copy = []
                copy = [...copy, ...arr]
                console.log(copy)*/
                console.log(Math.round(5 / 2))
            },
            /**
             * 模板字符串
             */
            es6StringTemplate() {
                // let str = `ES6引入了一种新型的字符串字面量语法`
                // let str0 = 'ES6引入了一种新型的字符串字面量语法'
                // console.log(str == str0)
                let newStr = 'ECMAScript'
                let str = `ES6引入了一种新型的${newStr}字符串字面量语法`
                let str0 = 'ES6引入了一种新型的' + newStr + '字符串字面量语法'
                console.log(str == str0)
            },
            /**
             * Array.from方法用于将两类对象转为真正的数组：
             * 类似数组的对象（array-like object）
             * 可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）
             */
            es6ArrayFrom() {
                let obj = {
                    '0': 1,
                    '1': 2,
                    '2': 3,
                    length: 3
                }
                console.log(Array.from(obj))
                let str = 'Iterator'
                console.log(Array.from(str))
                let set = new Set([1, 2, 3])
                console.log(Array.from(set))
            },
            handleToggleClick() {
                this.type = this.type === 'name' ? 'mail' : 'name'
            }
        }
    })
</script>
</html>